<template>
  <div class="container">
    <div class="videoPlay">
      <div class="left">
        <div class="play">
          <!-- 视频，MV标题 -->
          <div class="title">
            <span class="toBack el-icon-arrow-left" style="font-weight: 700;" @click="toBack"></span>
            <span class="name"><el-tag type="warning" effect="plain" v-if="type === 0">MV</el-tag>{{ mvDetailData.name ? mvDetailData.name : mvDetailData.title }}</span>
            <span class="nickname">{{ mvDetailData.artistName ? mvDetailData.artistName : nickname }}</span>
          </div>
          <!-- 视频,MV播放区 -->
          <div class="video">
            <video :src="this.mvUrl" controls="controls" autoplay></video>
          </div>
          <!-- 点赞，收藏，分享，下载 -->
          <div class="btn">
            <el-button size="mini" class="iconfont icon-dianzan"> 赞({{ mvDetailInfo.likedCount }})</el-button>
            <el-button size="mini" class="iconfont icon-folder-add"> 收藏({{ mvDetailData.subCount ? mvDetailData.subCount : mvDetailData.subscribeCount }})</el-button>
            <el-button size="mini" class="iconfont icon-share"> 分享({{ mvDetailData.shareCount }})</el-button>
            <el-button size="mini" class="iconfont icon-download"> 下载MV</el-button>
          </div>
          <!-- 评论模块 -->
          <div class="comment">
            <p class="comment_title">评论({{ mvDetailInfo.commentCount }})</p>
            <div class="submitComment">
              <el-form :model="commentForm" :rules="commentRules" ref="commentFormRef">
                <el-form-item prop="text">
                  <el-input v-model="commentForm.text" type="textarea" placeholder="请输入你的评论" show-word-limit maxlength="140" resize="none"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button size="mini" @click="sendComment" style="float: right;">评论</el-button>
                </el-form-item>
              </el-form>
            </div>
            <p class="wonderful_comment">精彩评论({{ mvDetailInfo.commentCount }})</p>
            <div :index="item.commentId" class="newComment" v-for="(item, index) in comments" :key="index">
              <div class="userComment">
                <div class="CommentContent">
                  <div class="userImg">
                    <img :src="item.user.avatarUrl" />
                  </div>
                  <div class="content">
                    <div class="top">
                      <a>{{ item.user.nickname }}：</a>
                      <span>{{ item.content }}</span>
                    </div>
                    <div class="time"><span>{{ item.time | showDate }}</span></div>
                  </div>
                </div>
                <div class="operate">
                  <div class="operate_box">
                    <span>
                      <div class="like">
                        <i class="iconfont icon-dianzan"></i>
                      </div>
                      ({{ item.likedCount }})</span>|
                    <span>分享</span>|
                    <span>回复</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="intro">
          <p class="title">MV介绍</p>
          <div class="param">
            <span class="publishTime">发布时间：{{ mvDetailData.publishTime }}</span>
            <span class="playCount">播放次数：{{ mvDetailData.playCount >10000 ? (mvDetailData.playCount / 10000).toFixed(0) + '万' : mvDetailData.playCount }}次</span>
          </div>
          <p class="brief_intro">简介：{{ mvDetailData.desc ? mvDetailData.desc : mvDetailData.description }}</p>
        </div>
        <div class="Related_recommend">
          <p class="title">相关推荐</p>
          <div class="recommend" v-for="(item, index) in recommendlist" :key="index" @click="toVideoPage(item.vid, item.type)">
            <div class="img">
              <img :src="item.coverUrl" />
              <!-- {{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }} -->
              <!-- <div class="playCount"><i class="el-icon-headset"></i>{{ item.playCount >10000 ? (item.playCount / 10000).toFixed(0) + '万' : item.playCount }}</div> -->
            </div>
            <div class="info">
              <span class="name"><el-tag size="mini" type="warning" effect="plain" v-if="item.type === 0">MV</el-tag>{{ item.title }}</span>
              <span class="time">{{ item.durationms }}</span>
              <span class="artistName">by {{ item.creator[0].userName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMvDetail, getMvDetailInfo, getMvUrl, getVideoUrl, getVideoDetail, getVideoDetailInfo, getRelatedVideo, getMvComment, getVideoComment } from '../../../network/videomv.js'
import { timeFormat, formatTime } from '../../../components/common/util.js'
export default {
  data () {
    return {
      id: 0,
      commentForm: {
        text: ''
      },
      // 评论表单验证规则对象
      commentRules: {
        // 验证内容是否合法
        text: [{
          required: true,
          message: '请输入评论内容',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 140,
          message: '长度为140个字符',
          trigger: 'blur'
        }
        ]
      },
      mvDetailData: {},
      mvDetailInfo: {},
      mvUrl: '',
      recommendlist: [],
      comments: [],
      MusicIsPlaying: false,
      type: 0,
      nickname: ''
    }
  },
  methods: {
    toBack () {
      this.$router.back()
    },
    // MV播放页面
    toVideoPage (id, type) {
      this.$router.push('/video_player/' + id)
      this.getVideoUrl(id)
      this.getVideoDetailInfo(id)
      this.getVideoDetail(id)
      this.getVideoComment(id)
      this.getRelatedVideo(id)
    },
    // 评论接口暂不可用
    sendComment () {},
    // 获取MV数据
    getMvDetail (id) {
      getMvDetail(id).then(res => {
        // console.log(res.data)
        this.mvDetailData = res.data.data
        this.type = this.mvDetailData.nType
        // console.log(this.mvDetailData)
      })
    },
    // 获取MV点赞等数据
    getMvDetailInfo (id) {
      getMvDetailInfo(id).then(res => {
        // console.log(res.data)
        this.mvDetailInfo = res.data
      })
    },
    // 获取MV播放地址
    getMvUrl (id) {
      getMvUrl(id).then(res => {
        // console.log(res.data)
        this.mvUrl = res.data.data.url
        // console.log(this.mvUrl)
      })
    },
    // 获取视频播放地址
    getVideoUrl (id) {
      getVideoUrl(id).then(res => {
        // console.log(res.data)
        this.mvUrl = res.data.urls[0].url
        // console.log(this.mvUrl)
      })
    },
    // 视频详情
    getVideoDetail (id) {
      getVideoDetail(id).then(res => {
        console.log(res.data)
        this.mvDetailData = res.data.data
        this.type = this.mvDetailData.authType
        this.nickname = this.mvDetailData.creator.nickname
      })
    },
    // 获取视频点赞转发评论数数据
    getVideoDetailInfo (id) {
      getVideoDetailInfo(id).then(res => {
        // console.log(res.data)
        this.mvDetailInfo = res.data
      })
    },
    // 视频评论
    getVideoComment (id) {
      getVideoComment(id).then(res => {
        // console.log(res.data)
        this.comments = res.data.comments
        // console.log(this.comments)
      })
    },
    // 获取相关推荐
    getRelatedVideo (id) {
      getRelatedVideo(id).then(res => {
        // console.log(res.data)
        this.recommendlist = res.data.data
        this.recommendlist.forEach(item => {
          item.durationms = timeFormat(item.durationms)
        })
        // console.log(this.recommendlist)
      })
    },
    getComment (id) {
      getMvComment(id).then(res => {
        // console.log(res.data)
        this.comments = res.data.comments
        // console.log(this.comments)
      })
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'yyyy-MM-dd hh:mm')
    }
  },
  created () {
    this.$store.commit('playStatus', this.MusicIsPlaying)
    this.id = parseInt(this.$route.params.id)
    this.getMvDetail(this.id)
    this.getMvUrl(this.id)
    this.getMvDetailInfo(this.id)
    this.getRelatedVideo(this.id)
    this.getComment(this.id)
  }
}
</script>

<style lang="less" scoped>
  .container {
    width: 82%;
    overflow: auto;
    .videoPlay {
      width: 90%;
      margin: 20px  auto;
      display: flex;
      justify-content: space-between;
      .left {
        width: 70%;
        // background-color: #f0f0f2;
        box-sizing: border-box;
        .play {
          .title {
            font-size: 20px;
            span {
              margin-right: 5px;
            }
            .nickname {
              font-size: 16px;
              color: #333333;
            }
          }
          .video {
            width: 100%;
            height: 400px;
            padding-bottom: 20px;
            video {
              width: 100%;
              height: 100%;
              margin: 10px 0;
              background-color: #000;
            }
          }
          .btn {
            .el-button {
              font-size: 16px!important;
              padding: 5px 10px;
            }
          }
          .comment {
            width: 100%;
            margin: 40px auto 20px;
            p {
              font-size: 18px;
            }
            .comment_title, .wonderful_comment {
              padding-bottom: 5px;
              border-bottom: 1px solid #e1e1e2;
            }
            .submitComment {
              margin: 10px 0 30px;
              background-color: #f0f0f2;
              padding: 10px;
            }
            .newComment {
              width: 100%;
              border-top: 1px solid #efefef;
              padding: 20px 0;
              .userComment {
                display: flex;
                justify-content: space-between;
                .CommentContent {
                  width: 82%;
                  font-size: 14px;
                  display: flex;
                  flex-direction: row;
                  .userImg {
                    width: 50px;
                    height: 50px;
                    margin-right: 15px;
                    img {
                      width: 100%;
                      height: 100%;
                      border-radius: 50%;
                    }
                  }
                  .content {
                    .top {
                      margin-bottom: 10px;
                      a {
                        color: #0a63a8;
                      }
                    }
                  }
                }
                .operate {
                  width: 20%;
                  color: #999999;
                  font-size: 14px;
                  display: flex;
                  flex-direction: column;
                  justify-content: flex-end;
                  .operate_box {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    span {
                      padding: 0 10px;
                      .like {
                        float: left;
                      }
                      i {
                        font-size: 16px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .right {
        width: 27%;
        // background-color: #f0f0f2;
        box-sizing: border-box;
        .intro, .Related_recommend {
          width: 100%;
          display: flex;
          flex-direction: column;
          .title {
            font-size: 20px;
            padding-bottom: 5px;
            border-bottom: 2px solid #e1e1e2;
          }
          .param {
            font-size: 15px;
            margin: 7px 0 15px;
            color:#888888;
            display: flex;
            justify-content: space-between;
          }
          .brief_intro {
            color: #666666;
          }
        }
        .Related_recommend {
          width: 100%;
          margin-top: 60px;
          .recommend {
            width: 100%;
            margin: 10px 0 5px;
            display: flex;
            justify-content: flex-start;
            cursor: pointer;
            .img {
              position: relative;
              width: 45%;
              // background-color: #999999;
              img {
                width: 100%;
              }
              .playCount {
                position: absolute;
                top: 0;
                right: 0;
                width: 50%;
                height: 22px;
                color: #fff;
                font-size: 14px;
                text-align: right;
                padding-right: 5px;
                background-image: linear-gradient(to right, rgba(0,0,0,0.02), rgba(0,0,0,0.4));
                transform: translateY(0);
                transition: transform 0.5s;
              }
            }
            .info {
              width: 50%;
              padding-left: 10px;
              padding: 10px 0 10px 10px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              .name {
                font-size: 15px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .time, .artistName {
                font-size: 14px;
                color: #666666;
              }
            }
          }
        }
      }
    }
  }
</style>
